<template>
  <div class="self_adaption">
    <div class="g-container">
      <div class="other">
        <p class="main_text">客服管理</p>
      </div>
      <!-- 搜索 -->
      <div class="g-search" ref="searchBox" style="padding-top: 20px">
        <!-- 信息区域 -->
        <div class="all_select">
          <!-- 投诉ID -->
          <div class="input_valye">
            <span class="demonstration">员工ID：</span>
            <input type="number" class="input" placeholder="请输入投诉ID" v-model="searchValue.empId" style="width: 200px"  @keyup.enter="search" />
          </div>
          <!-- 投诉订单 -->
          <div class="input_valye">
            <span class="demonstration">客服名称：</span>
            <input class="input" placeholder="请输入投诉订单" v-model="searchValue.keyword" style="width: 200px"  @keyup.enter="search" />
          </div>
          <!-- 处理状态 -->
          <div class="input_valye">
            <span class="demonstration">客服类型：</span>
            <el-select v-model="searchValue.type" class="m-2" placeholder="请选择处理状态" style="width: 200px" @change="search">
              <el-option v-for="item in serviceType_options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <!-- 处理状态 -->
          <div class="input_valye">
            <span class="demonstration">在线状态：</span>
            <el-select v-model="searchValue.status" class="m-2" placeholder="请选择在线状态" style="width: 200px" @change="search">
              <el-option v-for="item in status_options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- 底部按钮区域 -->
        <div class="bottom_btn">
          <el-button class="solid" @click="search">查询</el-button>
          <el-button class="hollow" @click="reset">重置</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table">
        <!-- 表格按钮区域 -->
        <div class="table_function">
          <el-button class="solid" @click="addService">添加客服</el-button>
          <el-button class="del_btn" @click="delAll">批量删除</el-button>
        </div>
        <!-- 表格区域 -->
        <el-table :data="tableData"   :header-cell-style="{
          'text-align': 'center',
          background: '#F2F7FC !important',
        }" @select-all="handleSelectionChange" @select="handleSelectionChange" :show-overflow-tooltip="true" >
          <el-table-column type="selection" width="40" />
          <el-table-column prop="id" label="员工ID" width="180" align="center" />
          <el-table-column prop="empName" label="客服名称" align="center" />
          <el-table-column prop="station" label="客服类型" align="center" />
          <el-table-column prop="createdAt" label="创建时间" align="center" min-width="100" />
          <el-table-column prop="status" label="在线/离线" align="center" min-width="140">
            <template #default="item">
              <el-switch :value="item.row.status ? true : false" class="ml-2" inline-prompt active-text="在线"
                inactive-text="离线" @click="changeStatus(item.row)" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" class="operation" :show-overflow-tooltip="false">
            <template #default="item">
              <div class="table_btn">
                <el-button size="small" class="none" @click="editBtn(item.row)">编辑</el-button>
                <el-button size="small" class="none_del" @click="delBtn(item.row.id)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <smartPager v-model:current-page="searchValue.page" v-model:page-size="searchValue.rows" :total="Number(total)"
          @change="pageChange" style="margin-left: 20px" />
      </div>
      <!-- 查看意见 -->
      <div class="plateform" v-if="mask">
        <div class="title1">
          <div class="title_mes">
            <el-icon size="20" color="#fff">
              <Edit />
            </el-icon>&nbsp;添加客服
          </div>
          <span class="close" @click="maskBtn1">✖</span>
        </div>
        <div class="content1" style="padding-top: 24px">
          <el-form ref="ruleFormRef" :model="GoodsformDate" label-width="80px" label-position="right" :rules="rules">
            <el-form-item label="员工名称:" prop="oeCode">
              <el-select v-model="GoodsformDate.empId" class="m-2" placeholder="请选择员工">
                <el-option v-for="item in employee_options" :key="item.employee_no" :label="item.name"
                  :value="item.employee_no">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="员工ID:" prop="oeCode">
              <el-input class="input" placeholder="请输入选择员工" v-model="GoodsformDate.empId" :disabled="true" />
            </el-form-item>
            <el-form-item label="客服类型:" prop="oeCode">
              <el-select v-model="GoodsformDate.station" class="m-2" placeholder="请选择客服类型">
                <el-option v-for="item in serviceType_options" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="btn_center">
          <el-button class="hollow" @click="maskBtn1">取消</el-button>
          <el-button class="solid" @click="plateformSure">确定</el-button>
        </div>
      </div>
      <!-- 遮罩层 -->
      <div id="mask1" style="z-index: 90" v-if="mask" @click="maskBtn1"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive, onBeforeUnmount } from 'vue';
import {
  RequestCustomServiceSettingPageList,
  RequestCustomServiceSettingEmpList,
  RequestCustomServiceSettingSave,
  RequestCustomServiceSettingDeleteList,
  RequestCustomServiceSettingUpdateStatus,
} from '@/api/path/index.js';
import type { FormInstance } from 'element-plus';
import { Edit } from '@element-plus/icons-vue';
const ruleFormRef = ref<FormInstance>();
const mask = ref(false); //遮罩层显示
const total = ref(0); //发票总数
const tableData = ref([]); //发票数组
// 表单规则
const rules = reactive({
  result: [{ required: true, message: '请选择处理结果', trigger: 'blur' }],
  content: [{ required: true, message: '请输入处理描述', trigger: 'blur' }],
});
const employee_options = ref([]);
onMounted(async () => {
  handleResize();
  window.addEventListener('resize', handleResize);
  requestCustomServiceSettingPageList();
  const a = await RequestCustomServiceSettingEmpList();
  employee_options.value = a.resultObj;
  console.log('员工列表', a.resultObj);
});
const searchBox = ref();
const tablelistHeight = ref();
const handleResize = () => {
  const searchBoxHeight = searchBox.value.clientHeight;
  tablelistHeight.value = 110 + searchBoxHeight + 'px';
  console.log('Search Box height11111111111111111111111111111:', searchBoxHeight);
};

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});
/**
 * 客服类型
 */
const serviceType_options = [
  {
    value: '商城客服',
    label: '商城客服',
  },
  {
    value: '收车客服',
    label: '收车客服',
  },
];
/**
 * 在线状态
 */
const status_options = [
  {
    value: 0,
    label: '离线',
  },
  {
    value: 1,
    label: '在线',
  },
];
/**
 * 获取投诉
 */
const requestCustomServiceSettingPageList = async () => {
  const a = await RequestCustomServiceSettingPageList(searchValue.value);
  if (a.msg == '操作成功！') {
    tableData.value = a.resultObj.list;
    total.value = a.resultObj.count;
  }
};
/**
 * 分页
 */
const pageChange = async (val: number) => {
  requestCustomServiceSettingPageList();
};

/**
 * 表格颜色区分
 */
const tableRowClassName = ({ row, rowIndex }: any) => {
  if (rowIndex % 2 !== 0) {
    return 'warning-row';
  }
};
/**
 * 搜索值
 */
const searchValue = ref({
  companyNode: JSON.parse(localStorage.getItem('roleInfo')!).company,
  empId: '',
  keyword: '',
  status: '',
  type: '',
  page: 1,
  rows: 10,
});
/**
 * 点击重置
 */
const reset = () => {
  searchValue.value = {
    companyNode: JSON.parse(localStorage.getItem('roleInfo')!).company,
    empId: '',
    keyword: '',
    status: '',
    type: '',
    page: 1,
    rows: 10,
  };
  requestCustomServiceSettingPageList();
};
/**
 * 搜索点击事件
 */
const search = async () => {
  searchValue.value.page = 1;
  requestCustomServiceSettingPageList();
};
/**
 * 点击添加客服
 */
const addService = () => {
  mask.value = true;
};
const GoodsformDate = ref({
  companyNode: JSON.parse(localStorage.getItem('roleInfo')!).company,
  empId: '',
  station: '',
});
/**
 * 点击确认
 */
const plateformSure = async () => {
  const a = await RequestCustomServiceSettingSave(GoodsformDate.value);
  if (a.msg == '操作成功！') {
    ElMessage.success('添加成功！');
    requestCustomServiceSettingPageList();
    maskBtn1();
  }
};
const selectList = ref<any>([]); //选中列表
const selectIDs = ref<any>([]); //选中ID
// 表格多选事件
const handleSelectionChange = (selection: any, row: any) => {
  selectList.value = selection;
};
/**
 * 批量删除
 */
const delAll = async () => {
  selectList.value.forEach((item: any) => {
    selectIDs.value.push(item.id);
  });
  console.log('选中ID', selectIDs.value);
  const a = await RequestCustomServiceSettingDeleteList(selectIDs.value);
  if (a.msg == '操作成功！') {
    ElMessage.success('删除成功！');
    requestCustomServiceSettingPageList();
  }
};
const changeStatus = async (item: any) => {
  const a = await RequestCustomServiceSettingUpdateStatus(item.id);
  requestCustomServiceSettingPageList();
};
/**
 * 点击查看
 */
const editBtn = async (item: any) => {
  GoodsformDate.value = item;
  mask.value = true;
};
/**
 * 删除
 */
const delBtn = async (id: Number) => {
  const a = await RequestCustomServiceSettingDeleteList([id]);
  if (a.msg == '操作成功！') {
    ElMessage.success('删除成功！');
    requestCustomServiceSettingPageList();
  }
};
/**
 * 遮罩层数据
 */
const maskBtn1 = () => {
  mask.value = false;
  GoodsformDate.value = {
    companyNode: JSON.parse(localStorage.getItem('roleInfo')!).company,
    empId: '',
    station: '',
  };
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/plateform/Article/Content.css';
@import '@/assets/css/plateform/Shop/GoodsManage.css';

::v-deep .el-upload-dragger {
  width: 100% !important;
}

.table {
  height: calc(100% - v-bind(tablelistHeight)) !important;

  .table_function {
    width: 100%;
    display: flex;
    align-items: center;
  }
}

.plateform {
  width: 500px;
  height: 350px;
  position: absolute;
  background: #fff;
  z-index: 92;
  top: calc(50% - 250px);
  left: calc(50% - 250px);
}

::v-deep .el-table--fit {
  height: calc(100% - 130px) !important;
}

.table :deep(.el-table__cell) {
  text-align: center;
}

.el-form-item :deep(.el-input-group__prepend) {
  width: 10px;
  background-color: #116cf8;
  color: #fff;
}

.el-table .warning-row {
  background: #f2f7fc;
}
</style>
